<!--主容器-->
<template>
  <div class="parent-top-level">

    <div class="container-left" v-show="leftStatus">
      <div class="container-left-top" ref="containerRightTop">
        <CNavLogo></CNavLogo>
      </div>
      <!--左侧菜单导航部分-->
      <div class="container-left-content" v-bind:style="{height: contentHeight + 'px'}">
        <CNavLeft></CNavLeft>
      </div>
      <div class="container-left-footer" v-bind:style="{height: scrollWidth + 'px'}">
      </div>
    </div>

    <div class="container-right">
      <div class="container-right-top">
        <CNavTop v-on:changeMenuStatus="changeMenuStatus"></CNavTop>
      </div>
      <!--路由切换部分-->
      <div class="container-right-content" v-bind:style="{height: contentHeight + 'px'}">
        <div class="container-right-content-blank">
        </div>
        <div class="container-right-content-router">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </div>
        <div class="container-right-content-blank">
        </div>
      </div>
      <div class="container-right-footer" v-bind:style="{height: scrollWidth + 'px'}">
      </div>
    </div>
  </div>
</template>

<script>
  import CNavTop from "../fragment/CNavTop.vue"
  import CNavLeft from "../fragment/CNavLeft.vue"
  import CNavLogo from "../fragment/CNavLogo.vue"

  export default {

    data() {
      return {
        contentHeight: 0,
        leftStatus: true,//左侧导航栏的显示状态，默认为显示,
        topHeight: 48,//顶部导航条的高度
        scrollWidth: 0,//滚动条宽度
      }
    },

    components: {
      CNavTop,
      CNavLeft,
      CNavLogo
    },

    beforeRouteEnter(to, from, next) {

      next()
    },

    beforeRouteLeave(to, from, next) {
      next()
    },

    deactivated() {
      this.$destroy(true);
    },

    watch: {},

    mounted() {
    },

    computed: {},


    activated() {
      this.istenWindinSize();
    },

    methods: {
      //改变左侧导航栏的显示状态
      changeMenuStatus() {
        if (this.leftStatus) {
          this.leftStatus = false;
          return;
        }
        this.leftStatus = true;
      },

      //监听浏览器视窗大小的变化
      istenWindinSize() {
        let that = this;
        this.scrollWidth = this.getScrollWidth();
        this.contentHeight = window.innerHeight - this.topHeight - this.scrollWidth;
        window.addEventListener('resize', function () {
          that.contentHeight = parseFloat(window.innerHeight) - parseFloat(that.topHeight) - parseFloat(that.scrollWidth);
        });
      },

      //获取滚动条宽度
      getScrollWidth() {
        var noScroll, scroll, oDiv = document.createElement("DIV");
        oDiv.style.cssText = "position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;";
        noScroll = document.body.appendChild(oDiv).clientWidth;
        oDiv.style.overflowY = "scroll";
        scroll = oDiv.clientWidth;
        document.body.removeChild(oDiv);
        return noScroll - scroll;
      }

    }
  }
</script>

<style lang="scss" scoped="" type="text/scss" src="../../assets/style/container.scss">
</style>

